본문으로 건너뛰기

7. 레이아웃 기법

웹 페이지의 레이아웃은 사용자 경험에 큰 영향을 미칩니다. CSS는 다양한 레이아웃 기법을 제공하며, 특히 Flexbox와 CSS Grid는 현대 웹 디자인에서 필수적인 도구로 자리 잡고 있습니다. 이 섹션에서는 Flexbox와 CSS Grid를 이용한 레이아웃 구성 방법과 포지셔닝 및 display 속성을 이해하는 방법을 다룹니다.

7.1 Flexbox를 이용한 레이아웃 구성​

Flexbox(Flexible Box Layout)는 요소들을 한 줄 또는 여러 줄로 정렬하고, 쉽게 배치할 수 있는 강력한 레이아웃 도구입니다. 주로 1차원 레이아웃(한 방향으로 배열)에 사용됩니다.

7.1.1 Flexbox 기본 속성​

  • display: flex: 부모 요소에 적용하여 Flexbox 컨테이너를 만듭니다.

  • flex-direction: 자식 요소들이 배치되는 방향을 설정합니다. 기본값은 row이며, column, row-reverse, column-reverse 등을 사용할 수 있습니다.

  • justify-content: 주축(메인 축)에서 자식 요소의 정렬을 설정합니다. flex-start, flex-end, center, space-between, space-around 등이 있습니다.

  • align-items: 교차축(크로스 축)에서 자식 요소의 정렬을 설정합니다. stretch(기본값), flex-start, flex-end, center 등을 사용할 수 있습니다.

  • flex-wrap: 자식 요소들이 한 줄에 맞지 않을 때 줄 바꿈 여부를 설정합니다. 기본값은 nowrap이며, wrap, wrap-reverse도 사용할 수 있습니다.

    .container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

7.1.2 Flexbox 실습 예제​

여기[https://playcode.io/css]에서 실습을 해볼까요. 링크 접속 후 html 부분에 아래 코드를 복붙하고, 하나씩 속성들을 바꿔봅시다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-around; /* flex-start, flex-end, center, space-between */
    align-items: center; /* stretch(기본값), flex-start, flex-end, center */
    height: 100vh;
  }

  .item {
    background-color: #f1f1f1;
    padding: 20px;
    margin: 10px;
  }
</style>

7.2 CSS Grid를 이용한 레이아웃 구성​

CSS Grid는 2차원 레이아웃(행과 열 모두)에 적합하며, 복잡한 레이아웃을 보다 쉽게 구성할 수 있는 도구입니다.

7.2.1 CSS Grid 기본 속성​

  • display: grid: 부모 요소에 적용하여 Grid 컨테이너를 만듭니다.

  • grid-template-columns: 그리드의 열 크기를 설정합니다. 비율(fr), 픽셀, 퍼센트 등을 사용할 수 있습니다.

  • grid-template-rows: 그리드의 행 크기를 설정합니다.

  • grid-gap: 그리드 아이템 사이의 간격을 설정합니다.

  • grid-area: 특정 그리드 아이템이 차지할 위치를 설정합니다.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3개의 동일한 크기의 열 */
  grid-template-rows: 200px auto 100px;
  grid-gap: 10px;
}

.grid-item {
  grid-area: 1 / 1 / 2 / 3; /* 첫 번째 행, 첫 번째 열에서 두 번째 행, 세 번째 열까지 차지 */
}

7.2.2 CSS Grid 실습 예제​

마찬가지로 여기[https://playcode.io/css]에서 실습을 해볼까요.

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px auto;

    grid-gap: 10px;
  }

  .grid-item {
    background-color: #b1b1b1;
    padding: 20px;
    text-align: center;
  }
</style>

7.3 포지셔닝과 display 속성 이해​

CSS에서 레이아웃을 구성하는 중요한 요소는 포지셔닝과 display 속성입니다.

7.3.1 포지셔닝​

포지셔닝은 요소의 위치를 제어하는 중요한 방법입니다.

  • static: 기본값으로, 요소는 HTML 문서의 흐름에 따라 위치합니다.

  • relative: 요소의 원래 위치를 기준으로 이동합니다.

  • absolute: 부모 요소를 기준으로 위치하며, 문서 흐름에서 제거됩니다.

  • fixed: 화면을 기준으로 고정되어, 스크롤해도 위치가 변하지 않습니다.

.element-static {
  position: static;
}

.element-relative {
  position: relative;
  top: 10px;
  left: 5px;
}

.element-absolute {
  position: absolute;
  top: 50px;
  right: 20px;
}

.element-fixed {
  position: fixed;
  bottom: 10px;
  left: 0;
}

7.3.2 포지셔닝 실습​

element의 position 속성말고도, 부모가되는 container의 position 속성도 제어해보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Positioning Practice</title>
    <style>
      /* 공통 스타일 */
      .box {
        width: 100px;
        height: 100px;
        color: white;
        text-align: center;
        line-height: 100px;
        margin: 20px;
      }

      .container {
        width: 100%;
        height: 200px;
        position: relative;
        background-color: #f3f3f3;
        margin-bottom: 50px;
      }

      /* Positioning Styles */
      .element-static {
        position: static;
        background-color: #3498db;
      }

      .element-relative {
        position: relative;
        top: 10px;
        left: 5px;
        background-color: #e74c3c;
      }

      .element-absolute {
        position: absolute;
        top: 50px;
        right: 20px;
        background-color: #2ecc71;
      }

      .element-fixed {
        position: fixed;
        bottom: 10px;
        left: 0;
        background-color: #f1c40f;
      }
    </style>
  </head>
  <body>
    <h1>Positioning Practice</h1>

    <!-- Static Position Example -->
    <div class="container">
      <div class="box element-static">Static</div>
    </div>

    <!-- Relative Position Example -->
    <div class="container">
      <div class="box element-relative">Relative</div>
    </div>

    <!-- Absolute Position Example -->
    <div class="container">
      <div class="box element-absolute">Absolute</div>
    </div>

    <!-- Fixed Position Example -->
    <div class="container">
      <div class="box element-fixed">Fixed</div>
    </div>
  </body>
</html>

7.3.2 display 속성​

display 속성은 요소가 웹 페이지에서 어떻게 배치되고 표시될지를 결정하는 중요한 속성입니다.

  • block: 요소는 블록 수준 요소로, 전체 너비를 차지하며 줄바꿈이 일어납니다.

  • inline: 요소는 인라인 요소로, 다른 요소들과 같은 줄에 표시됩니다.

  • inline-block: 블록 요소처럼 너비와 높이를 설정할 수 있지만, 인라인 요소처럼 줄바꿈 없이 표시됩니다.

  • none: 요소를 화면에서 숨깁니다.

.block-element {
  display: block;
}

.inline-element {
  display: inline;
}

.inline-block-element {
  display: inline-block;
}

.hidden-element {
  display: none;
}